<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登陆</title>
    <link rel="icon" type="image/svg+xml" href="../assets/image/logo.svg">
    
    <cms:webpack>
        <file path="../assets/bootstrap-5.3.0/bootstrap.min.css"></file>
        <file path="../assets/font-awesome-4.7.0/css/font-awesome.min.css"></file>
        <file path="../assets/css/global.css"></file>
        <file name="Admin" path="../assets/js/admin.js" ></file>
    </cms:webpack>

    <script>
    var admin = new Admin();
    admin.setData(<cms:json data="#TEMPLATE_INIT_DATA#"></cms:json>);
    </script>
    <style>
        body{
            background-image: url("#wallpaper#");
            background-position: center center;
            background-size: cover;
        }
        .container{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
         }

        .login-box{
            width: 490px;
            position: relative;
            box-shadow: 0 .25rem .75rem rgba(0,0,0,.3);
            background-color:rgba(255,255,255,.9);
        }

        .login-box .logo{
            position: absolute;
            font-size: 60px;
            z-index: 3;
            left: 50%;
            margin-left: -30px;
            top: -50px;
            width: 60px;
            height: 60px;
        }
 
        .login-box .card-body{
            padding: 20px;
        }
        
        .login-banner{
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }

        .btn-login {
           
            -webkit-box-shadow: 0 2px 6px 0 rgb(0 106 219 / 50%);
            box-shadow: 0 2px 6px 0rgba(0, 106, 219,0.5);
            color: #FFFFFF;
            width: 100%;
        }

        .btn-login:hover {
            color: #FFFFFF;
            box-shadow: 0 2px 6px 0rgba(0, 106, 219,0.2);
        }

        .btn-box{
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .username-box{
            position: relative;
        }

        .remember-box input{
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="container">
        <div id="login">
        <bi-card class="login-box"  >
             <div class="login-banner">
                 <img src="../assets/image/logo.svg"  style="width: 48px; height: 48px;" />
                {{title}}
            </div>
            <bi-form ref="login" label-width="0px"  @submit="submit" >
                
                <bi-form-item>
                    <bi-input name="username" ref="username" tabindex="1" required placeholder="User" after-width="30px" icon="fa fa-user" v-model="form.username">
                        <template #after>
                            <div class="remember-box" title="记住用户名"><input type="checkbox" v-model="remember" tabindex="3" /></div>
                        </template>
                    </bi-input>  
                </bi-form-item>
                <bi-form-item>
                    <bi-input name="password" ref="password" tabindex="2" icon="fa fa-lock"  required type="password" placeholder="Password" v-model="form.password"></bi-input>
                </bi-form-item>
                <div class="btn-box">
                    <bi-button type="primary" submit  tabindex="4" size="big" class="btn-login" :loading="loading">登 录</bi-button>
               </div>
            </bi-form>
           
           <div class="form-group m-t-10 mb-0 row">
                 <div class="col-sm-7 m-t-20">
                    <a href="#" class="text-muted" @click="forgot">
                         <small>Forgot your password ?</small>
                    </a>
                </div>
            </div>
        </bi-card>
        </div>
    </div>

    <script>
        let app = admin.createApp({
            data(){

                let form= {
                    username: localStorage.getItem('admin_remember_username'),
                    password: '',
                }

                return {
                    title:'用户登录',
                    loading:false,
                    remember:localStorage.getItem('admin_remember_username') == null ? false : true,
                    usernameReg:this.$pageData.usernameReg,
                    form
                }
            },
            methods:{
                submit(){
                   
                   if (this.$refs.login.check()){
                       this.loading = true;
                        
                       this.$ajax({
                            url:this.$url({'app':'admin','controller':'outside','action':'loging'}),
                            data:this.form,
                            success:(re)=>{

                                if (this.remember){
                                    localStorage.setItem('admin_remember_username',this.form.username);
                                }else{
                                    localStorage.removeItem('admin_remember_username');
                                }

                                this.$user.setData(re.user);

                                this.$admin.userInit(()=>{
                                    this.loading = false;

                                    if (this.$pageData.nav != ''){
                                        window.location.href = this.$pageData.nav;
                                    }else{
                                        window.location.href =  re.url;
                                    }
                                });
                               
                            },
                            fail:(msg)=>{

                                this.$alert({
                                    text:msg,
                                    type:'error'
                                })

                                this.loading = false;
                            }
                       });

                   }
                },
                forgot(){
                    console.log(this);
                }
            },
            mounted(){
                if (localStorage.getItem('admin_remember_username') == null){
                    this.$refs.username.focus();
                }else{
                    this.$refs.password.focus();
                }
            }
        }).mount('#login');
    </script>
</body>
</html>